import React, { forwardRef, useState, useEffect } from "react";
import { Form, Input, Select } from "antd";

const { Option } = Select;

const UserForm = (props, ref) => {
  const [regionDisabled, setregionDisabled] = useState(false);
  useEffect(() => {
    setregionDisabled(props.regionEnable);
  }, [props.regionEnable]);
  const { roleId, region } = JSON.parse(localStorage.getItem("token"));
  const roleObj = {
    1: "superAdmin",
    2: "admin",
    3: "editer"
  };
  const checkRegionEnbled = item => {
    if (props.type === "edit") {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return item.value !== region;
      }
    }
  };
  const checkRoleEnbled = item => {
    if (props.type === "edit") {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return roleObj[item.roleType] !== "editer";
      }
    }
  };
  return (
    <Form ref={ref} layout="vertical">
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: "请输入用户名!"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: "请输入密码!"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={
          regionDisabled
            ? ""
            : [
                {
                  required: true,
                  message: "请选择区域!"
                }
              ]
        }
      >
        <Select onChange={() => {}} disabled={regionDisabled}>
          {props.regions.map(item => {
            return (
              <Option
                value={item.value}
                key={item.id}
                disabled={checkRegionEnbled(item)}
              >
                {item.title}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: "请选择角色!"
          }
        ]}
      >
        <Select
          onChange={data => {
            if (data === 1) {
              ref.current.setFieldsValue({ region: "" });
              setregionDisabled(true);
            } else {
              setregionDisabled(false);
            }
          }}
        >
          {props.roles.map(item => {
            return (
              <Option
                value={item.id}
                key={item.id}
                disabled={checkRoleEnbled(item)}
              >
                {item.roleName}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
};
export default forwardRef(UserForm);
